const CardCop = () => {
	const cardTag = "card";
	const cards = [
		{
			title: "卡片1",
			content: "内容1"
		},
		{
			title: "卡片2",
			content: "内容2"
		},
		{
			title: "卡片3",
			content: "内容3"
		},
		{
			title: "卡片4",
			content: "内容4"
		}
	];
	let cardList = [];
	cards.forEach(item => {
		cardList.push(
			<div className={cardTag + "wrapper"}>
				<div className={cardTag} key={item.title}>
					<div className={cardTag + "title"}>{item.title}</div>
					<div className={cardTag + "desc"}>{item.content}</div>
				</div>
			</div>
		);
	});
	return <div className="card-wrapper">{cardList}</div>;
};

export default CardCop;

// const CardCop = () => {
// 	const cardTag = "card";
// 	const cards = [
// 		{
// 			title: "卡片1",
// 			content: "内容1"
// 		},
// 		{
// 			title: "卡片2",
// 			content: "内容2"
// 		},
// 		{
// 			title: "卡片3",
// 			content: "内容3"
// 		},
// 		{
// 			title: "卡片4",
// 			content: "内容4"
// 		}
// 	];
// 	// 使用 map 函数遍历数组，为每个元素创建一个 <li> 元素
// 	const listItems = cards.map(item => (
// 		<div className={cardTag} key={item.title}>
// 			<div className={`${cardTag}-title`}>{item.title}</div>
// 			<div className={`${cardTag}-content`}>{item.content}</div>
// 		</div>
// 	));
// 	// const listItems = cards.map(item => (
// 	// 	<div className={cardTag}>
// 	// 		<div className={`${cardTag}-title`}>{item.title}</div>
// 	// 		<div className={`${cardTag}-content`}>{item.content}</div>
// 	// 	</div>
// 	// ));
// 	return <div className="card-wrapper">{listItems}</div>;
// };

// export default CardCop;
